<template>
	<view class="modex-mine">
		<view class="top-background">

		</view>

		<view class="back-arrow" :style="{'top': paddingTop}">
			<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#287b94">
			</uni-icons>
			<uni-icons style="margin-right: 40rpx;" type="search" size="30" color="#287b94"></uni-icons>
		</view>

		<view class="rising-text">
			<view class="text">希望在钢筋混凝土的田野里</view>
		</view>

		<view class="mind-deep">
			<view style="background-color: #FFFFFF;height: 120rpx;width: 90%;border-radius: 10rpx;margin-left: 5%;">
				<view
					style="display: flex; flex-direction: row;justify-content: space-around;align-items: center;width: 96%;height: 100%;margin-left: 2%;">
					<view v-for="(item, index) in mindDeeps" :key="index">
						<view
							:style="'width: 80rpx;height: 40rpx;border-radius: 10rpx;background-color: ' + mindDeepColor[item] + ';'">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-back">
			<view class="tabs">
				<view v-for="(item,index) in types">
					<view @click="changeTab(index)" class="tab" :class="index == currentTypeIndex ? 'tab-current': '' ">
						<view>{{item}}</view>
						<view v-if="index == currentTypeIndex" class="tab-line"></view>
					</view>
				</view>
			</view>
		</view>



		<view class="mind-list">
			<view v-if="showTipAdd == 1" class="card mind">
				<view class="mind-date" style="">
					<span>输出一条mind</span>
					<span @click="cancelInput">取消</span>
				</view>
				<view class="tip-content">
					<textarea :show-confirm-bar="false" @input="messageInput" v-model="tipContent"
						style="font-size: 100%;width: 100%;"
						v-bind:style="{ height: 40+Math.trunc(tipContent.length/23)*40 + 'rpx' }"
						placeholder="写下一种文明"></textarea>
				</view>
			</view>
			<view class="mind" v-for="(item, index) in minds" :key="index">
				<view v-if="item.type != 4" @tap="toQuestionDetail(item.questionListVO,item.type)" :data-item="item"
					class="card">
					<view class="mind-date">{{ item.gmtCreate }} {{ mindType[item.type] }}</view>
					<view class="question-title">{{ item.questionListVO.title }}</view>
					<view class="question-point">观点：{{ item.questionListVO.point }}</view>
					<view class="question-answer">回答：{{getSimpleText(item.questionListVO.answer)}}</view>
				</view>
				<view v-if="item.type == 4" @touchend="maskTouchend(index,item)" class="card">
					<view class="mind-date">{{ item.gmtCreate }} 输出一条mind</view>
					<view v-if="item.isEdit && item.isEdit == 1" class="tip-content">
						<textarea :show-confirm-bar="false" @input="messageInput" v-model="item.content" ref="ipt"
							style="font-size: 100%;width: 100%;"
							v-bind:style="{ height:40+Math.trunc(item.content.length/23)*40 + 'rpx' }"
							placeholder="写下一种文明"></textarea>
					</view>
					<view v-else class="tip-content">{{ item.content }}</view>
				</view>
			</view>
		</view>

		<view class="page-btns">
			<image mode="aspectFill" v-if="showTipAdd == 0 && showTipEdit == 0" @tap="openAddModal"
				@longpress="toAddQuestion" style="width: 150rpx; height: 150rpx;border-radius: 15rpx;"
				src="https://www.cdn.kxcdedu.top/image/default/9285446E0BB740A482FF4072C8FD34A6-6-2.png"></image>
			<image mode="aspectFill" v-if="showTipAdd == 1 || showTipEdit == 1" @tap="addTip"
				style="width: 150rpx; height: 150rpx;border-radius: 15rpx;"
				src="https://www.cdn.kxcdedu.top/image/default/3265C9456C9842D2ACC4C65B5014B0F4-6-2.png"></image>
		</view>
	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	const app = getApp();
	export default {
		data() {
			return {
				touchNum: 0,
				pageNow: 1,

				showTipAdd: 0,
				showTipEdit: 0,
				tipEditId: '',
				tipEditIndex: -1,

				minds: [],
				types: ["全部", "提问", "观点", "回答", "想法"],
				currentTypeIndex: 0,
				mindType: ['', '发起一个提问', '提出一个观点', '输出一个回答', '输出一条mind'],

				mindDeeps: [],
				mindDeepColor: ['#ebebeb', '#5DACB1', '#1f657a', '#164756'],

				tipContent: '',

				paddingTop: null
			};
		},
		onLoad() {
			var that = this;
			that.pageMyMind();
			that.listRecentMindDeep();

			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		onReachBottom() {
			this.pageNow++
			this.$api.pageMyMind({
				pageSize: 20,
				pageNow: this.pageNow,
				type: this.currentTypeIndex
			}).then(res => {
				this.minds = [...this.minds, ...res.data.rows]
			})
		},
		methods: {
			maskTouchend(index, mind) {
				var that = this
				this.touchNum++
				setTimeout(() => {
					if (this.touchNum == 1) {
						console.log('单击')
					}
					if (this.touchNum >= 2) {
						console.log('双击')
						this.minds[index].isEdit = 1;
						this.showTipEdit = 1
						this.tipEditId = mind.id
						this.tipEditIndex = index
						this.tipContent = mind.content
					}
					this.touchNum = 0
				}, 250)
			},
			pageMyMind() {
				this.$api.pageMyMind({
					pageSize: 20,
					pageNow: 1,
					type: this.currentTypeIndex
				}).then(res => {
					this.minds = res.data.rows

				})
			},

			listRecentMindDeep() {
				this.$api.listRecentMindDeep().then(res => {
					this.mindDeeps = res.data
				})
			},

			addTip() {
				if (this.tipContent == '') {
					uni.showModal({
						title: '提示',
						content: '内容不能为空'
					});
				} else {
					if (this.showTipAdd == 1) {
						this.$api.createMind({
							content: this.tipContent
						}).then(res => {
							this.minds.unshift(res.data)
							uni.showToast({
								icon: 'success'
							})
							this.tipContent = ""
							this.showTipAdd = 0
						})
					} else {
						this.$api.updateMind({
							id: this.tipEditId,
							content: this.tipContent
						}).then(res => {
							uni.showToast({
								icon: 'success'
							})
							this.minds[this.tipEditIndex].content = this.tipContent
							this.minds[this.tipEditIndex].isEdit = 0
							this.tipContent = ""
							this.tipEditIndex = -1
							this.$forceUpdate()
						})
					}
				}
			},

			// 取消输入
			cancelInput() {
				this.tipContent = '',
					this.showTipAdd = 0
			},

			// 前往问题新建页
			toAddQuestion() {
				uni.navigateTo({
					url: '/pages_modex/question/question-add'
				});
			},

			toQuestionDetail(questionListVO, mindType) {
				switch (mindType) {
					case 1:
						uni.navigateTo({
							url: '/pages_modex/question/question-detail?questionId=' + questionListVO.id
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages_modex/question/answer?pointId=' + questionListVO.pointId +
								"&questionId=" + questionListVO.id
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages_modex/question/answer-detail?answerId=' + questionListVO.answerId +
								"&pointId=" + questionListVO.pointId + "&questionId=" + questionListVO.id
						});
						break;
				}

			},

			showTipAddFun() {
				this.showTipAdd = 1
			},

			scrollbot: function() {},

			messageInput(e) {
				this.tipContent = e.detail.value
			},

			changeTab(index) {
				this.currentTypeIndex = index
				this.pageMyMind()
			},

			openAddModal() {
				this.showTipAdd = 1
			},

			toBackPage() {
				uni.navigateBack()
			},

			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			}
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		}
	};
</script>
<style scoped lang="scss">
	.modex-mine {

		background-color: #F9F9F9;


		.top-background {
			position: fixed;
			z-index: 2;
			width: 100%;
			height: 450rpx;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;
		}

		.back-arrow {
			width: 100%;
			//#ifdef MP-WEIXIN
			width: 550rpx;
			//#endif

			top: 100rpx;

			// #ifdef H5
			top: 40rpx;
			// #endif

			height: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			position: fixed;
			z-index: 2;
		}

		.rising-text {
			position: sticky;
			top: 220rpx;

			// #ifdef H5
			top: 160rpx;
			// #endif

			width: 100%;
			z-index: 3;
			font-size: 36rpx;
			font-weight: bold;

			height: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.text {
				letter-spacing: 5rpx;
				background: linear-gradient(90deg, rgba(55, 143, 153, 1) 0%, rgba(171, 111, 94, 0.43) 51.31%, rgba(102, 173, 239, 1) 100%);
				-webkit-background-clip: text;
				color: transparent;
			}
		}

		.mind-deep {



			position: sticky;
			top: 330rpx;

			// #ifdef H5
			top: 270rpx;
			// #endif

			width: 100%;
			z-index: 3;

		}

		.content-back {
			position: sticky;
			top: 400rpx;

			// #ifdef H5
			top: 340rpx;
			// #endif

			width: 100%;
			height: 140rpx;
			background-color: #F9F9F9;
			border-radius: 25rpx 25rpx 0 0;
			z-index: 2;



			.tabs {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 40rpx;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				// border-bottom: solid thin #d3d3d3;

				.tab {
					margin-left: 30rpx;
					margin-top: 70rpx;
					color: gray;
					height: 65rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}

				.tab-current {
					color: #2c2c2c;
					font-weight: bold;
				}

				.tab-line {
					width: 40rpx;
					height: 7rpx;
					border-radius: 5rpx;
					background-color: #2c2c2c;
				}


			}

		}

		.mind-list {
			position: relative;
			z-index: 1;
			margin-top: 230rpx;

			// #ifdef H5
			margin-top: 170rpx;
			// #endif

			min-height: 500rpx;
		}



		.userinfo-avatar {
			display: flex;
			overflow: hidden;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-left: 30rpx;
		}



	}


	.card {
		width: 90%;
		background-color: white;
		// box-shadow: 1px 1px 8px 2px #e9eee9;
		margin-left: 5%;
		border-radius: 10rpx;
	}

	.mind {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.mind-date {
		color: gray;
		font-size: 70%;
		margin-left: 20rpx;
		margin-top: 20rpx;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-right: 20rpx;
	}

	.tip-content {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		color: rgb(43, 42, 42);
	}

	.question-title {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		font-size: 110%;
		font-weight: bold;
		color: #000222;
	}

	.question-point {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		color: rgb(43, 42, 42);
		margin-bottom: 10rpx;
	}

	.question-answer {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		color: rgb(43, 42, 42);

		/*超过范围进行隐藏不显示*/
		overflow: hidden;
		/*文本溢出, 使用省略号 */
		text-overflow: ellipsis;
		/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
		display: -webkit-box;
		/*限制块容器显示的文本行数, 按照你的需求设置*/
		-webkit-line-clamp: 3;
		/*盒子的方向, 垂直、水平等*/
		-webkit-box-orient: vertical;
		/*文字换行, 可以在单词内断*/
		word-wrap: break-word;
	}

	.page-btns {
		display: flex;
		position: fixed;
		right: 100rpx;
		bottom: 100rpx;
		z-index: 10;
	}

	.myButton {
		color: white;
		font-family: KAITI;
		border-radius: 20rpx;
		background-color: #1244de;
		padding: 0;
		padding-top: 8rpx;
		box-shadow: 1px 1px 8px 2px #c8cec8;
	}

	.rowItem {
		display: inline-block;
	}

	.scroll-x {
		white-space: nowrap;
		display: flex;
	}
</style>
